<template>
  <div>
    <!-- 顶部 -->
  <van-nav-bar
  title="账号注册" left-arrow/>
  <!-- from表单 -->
  <van-form @submit="onSubmit">
  <van-field
    v-model="formLogin.username"
    name="用户名"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '请输入账号',trigger: 'onChange' }]"
  />
  <van-field
    v-model="formLogin.password"
    type="password"
    name="密码"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '请输入6位正确密码' ,trigger: 'onChange',pattern: /^\d{6}$/}]"
  />
  <div style="margin: 16px;">
    <van-button  block type="primary" native-type="submit">注册</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { signIn } from '@/api'
// import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  data () {
    return {
      formLogin: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // ...mapActions(['asyncLoginAction']),
    async onSubmit (values) {
      //   console.log('submit', values)
      //   const res = await loginApi(this.formLogin)
      //   console.log('res:', res)
      try {
        const res = await signIn(this.formLogin)
        console.log(res)
        Notify({ type: 'success', message: '注册成功' })
      } catch (err) {
        Notify({ type: 'warning', message: '用户名或密码错误' })
      }
    }
  }
}
</script>

  <style lang="less" scoped>
    /deep/.van-nav-bar__content{
      background-color: #21b97a;
      margin-bottom: 25px;
      .van-nav-bar__title{
        color: #fff;
        font-size: 18px;
      }
      .van-icon {
        color: #fff;
        width: 22px;
        height: 22px;
        line-height: 23px;
      }
    }
    /deep/ .van-cell {
      margin-bottom: 20px;
      height: 60px;
      font-size: 18px;
      line-height: 30px;
    }
    /deep/ .van-button {
      background-color: #21b97a;
      height: 50px;
      margin-bottom: 20px;
    }
  </style>
